[#ftl]
[@define "agile.AnimationFrameEditor","agile._MetadataAware" "HorizontalSlider=dijit/form/HorizontalSlider,HorizontalRuleLabels=dijit/form/HorizontalRuleLabels,HorizontalRule=dijit/form/HorizontalRule"]
	[#assign templateString]
	<table cellspacing="0px">
	<tr><td valign="centre" title="{i18n_keyframes_tooltip}" class="tooltip" >
		capture {i18n_keyframes} <div data-dojo-type='dijit/form/CheckBox' data-dojo-attach-point='captureKeyframe'></div>
	</td></tr>
	<tr>
	<td>			
	<div data-dojo-attach-point="keyframeStep" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='value:0,minimum:0,maximum:100,discreteValues:11,intermediateChanges:true,showButtons:false,style:"width:400px"'>
		    <ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration",style:"height:1.5em;font-size:75%;color:gray;"'>
		        <li></li><li>20%</li><li>40%</li><li>60%</li><li>80%</li><li></li>
		    </ol>
		    <div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration",count:11,style:"height:5px;"'>  </div>
		    <ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration",style:"height:1em;font-size:75%;color:gray;"'>
		        <li>0%</li><li>50%</li><li>100%</li>
		    </ol>
		</div>
	</td>
	</tr>
	<tr>
	<td align="left">
		<div data-dojo-attach-point="keyframeStyle" data-dojo-type="agile.CssRuleEditor" [#--data-dojo-props='selectors:"height,width,background,background-color,border-color,color,word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,line-height,height,border-width,border-spacing,background-position,transform,*"'--]></div>
	</td>
	</tr>
	</table>
	[/#assign]
	 templateString:"${templateString?js_string}",name:"keyframes",htmlName:"keyframes",animationName:null,animationPlayState:null,propertyNames:null,animationValueEditor:null

	 ,init:function(){		 
		//set the context for nested context aware
//		console.log("####################this.context=",this.context,this.keyframeStyle == null)
//		this.keyframeStyle.set("context",this.context);
		this.keyframeStyle.on("change",lang.hitch(this,function(value){
			var ownerWidget = this.context.getCurrentWidget();
			 if(ownerWidget && this.animationName){
				 var keyframes = ownerWidget.metadata("parameters.keyframes." + this.animationName);
				 if(!keyframes){
					 keyframes = {};
					 ownerWidget.metadata("parameters.keyframes."+this.animationName,keyframes);
				 }
				 keyframes['p'+this.keyframeStep.get("value")] = value?value:null;
				// agile.replaceKeyFrameRule(keyframes);
			 }
		}));

		this.keyframeStep.watch("value",lang.hitch(this,function(name,old,value){
			 var ownerWidget = this.context.getCurrentWidget();
			 if(ownerWidget && this.animationName){
				 var keyframes = ownerWidget.metadata("parameters.keyframes." + this.animationName);
				 if(!keyframes){
					 keyframes = {};
					 ownerWidget.metadata("parameters.keyframes."+this.animationName,keyframes);
				 }
				 
				 var rules = keyframes['p'+value];
     			 this.keyframeStyle.reset1("value",rules?rules:"");

			 }
		}));
		
//		this.keyframeStep.set("disabled",true);
		this.keyframeStyle.set("disabled",true);
		if(!this.animationName){			
			this.captureKeyframe.set("disabled",true);			
		 }else{
			this.captureKeyframe.set("disabled",false);
		 }
		
		this.captureKeyframe.watch("checked",lang.hitch(this,function(name,old,checked){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
				ownerWidget.set("captureKeyframe",checked);
//				this.keyframeStep.set("disabled",!checked);
				this.keyframeStyle.set("disabled",!checked);
				this.animationValueEditor.reset1("readOnly",checked);
				
				if(checked){
					//clear style editors value except AnimationEditor				
					topic.publish("agile.widget.animation",ownerWidget);					
				}else{
					//reset style to initial state
					topic.publish("agile.widget.selected",ownerWidget);
					ownerWidget.applyParameterStyle(true);
					topic.publish("agile.widget.animation",null);
				}
			}
		}));
		
		this.watch("animationName",lang.hitch(this,function(name,oldValue,newValue){
//			console.log(this.declaredClass,"animationName changed:",arguments);
//			this.set("disabled",newValue == null);
			this.captureKeyframe.set("disabled",!newValue);
			
//			this.keyframeStep.set("disabled",false);
//			this.keyframestyle.set("disabled",false);
			 var ownerWidget = this.context.getCurrentWidget();
			 if(ownerWidget && newValue){				 
				 				 
				 var keyframes = ownerWidget.metadata("parameters.keyframes."+newValue);
				 if(!keyframes){
					 keyframes = {};
					 ownerWidget.metadata("parameters.keyframes."+newValue,keyframes);
				 }
				//set the value for step 0				 
				 if(this.keyframeStep.get("value") == 0){
					 
					 var keyframes = ownerWidget.metadata("parameters.keyframes." + this.animationName);
					 if(keyframes && keyframes['p0']){
						 this.keyframeStyle.reset1("value",keyframes['p0']);
					 }else{
						 this.keyframeStyle.reset1("value","");
					 }	
				 
				 }else{
					//set default step to 0 and fire the change event
					 this.keyframeStep.set("value",0);
				 }
			 }	
		}));		
		
		//subscribe from MetadataAware:apply style to current key frame
		this.subscribe("style-changed",function(ownerWidget,htmlName,value){
			if(this.animationName && htmlName != "animation" && htmlName != "animation-play-state"){
//				this.keyframeStyle.selector.set("value",htmlName);
//				this.keyframeStyle.content.set("value",value);
				this.keyframeStyle.addOption([{label:htmlName +":" + value,value:htmlName}]);				
			}
		});
		
	 }
	,onChange:function(value,name,htmlName){
		//nothing to do
	}
	,get:function(name){
		if(name == "value"){
			return null;//make it not to be serialized as style attribute
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){			
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget && this.animationName){
				value = ownerWidget.metadata("parameters.keyframes."+this.animationName);					
			}
			
			this.keyframeStyle.reset1(name,value?value['p0']:"");	
			this.keyframeStep.set("value",0);
			this.captureKeyframe.set("checked",false);
			this.inherited("set",["value",value]);
		}
		else{
			this.inherited(arguments);
		}
	}
	,reset1:function(name,value){
		if(name == "value"){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget && this.animationName){
				value = ownerWidget.metadata("parameters.keyframes."+this.animationName);					
			}
			
			this.keyframeStyle.reset1(name,value?value['p0']:"");
			this.keyframeStep.set(name,0);	
			this.captureKeyframe.set("checked",false);
			this.inherited("set",["value",value]);
		}else{
			this.inherited(arguments);
		}		
	}
[/@]

[@define "agile.AnimationPlayState","agile._MetadataEditor"]	
	[#assign templateString]
	<div><div data-dojo-type="agile.NumberComboBox" data-dojo-attach-point="delegate" data-dojo-props='defValue:"",required:false,options:"paused,running"'></div></div>
	[/#assign]
	templateString:"${templateString?js_string}",htmlName:"animation-play-state"

	,init:function(){
		this.inherited(arguments);
		this.delegate.watch("value",lang.hitch(this,function(name,oldValue,newValue){
//			console.log(this.declaredClass,"animationPlayState changed:",arguments,",has context=",this.context !=null);						
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){				
				this.onChange(newValue,this.name,this.htmlName);				
				 if(newValue == "running"){	
					 var keyframes = ownerWidget.metadata("parameters.keyframes");
					 if(keyframes){
							var _keyframes = lang.clone(keyframes);							
							for(var name in _keyframes){//iterate all animations
								for(var e in _keyframes[name]){//iterate all key frames for each animation
									_keyframes[name][e] = agile.adviseCssRules(_keyframes[name][e]);//customize css rule for each frame								
								}
								//play the animation
								//_keyframes[name]["name"] = name;
								//console.log(_keyframes[name],"########keyframe=",agile.keyframes2String(name,_keyframes[name]));
								agile.replaceKeyFrameRule(name,_keyframes[name]);
							}
							//console.log(_keyframes[name],"########keyframes=",keyframes);
						}	
				 }				 
			 }
		}));
	}
[/@]

[#--
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
--]

[@define "agile.AnimationValueEditor","agile._MetadataEditor,agile.MultiItemEditorListener"]
[#assign templateString][#compress]	
<div>
	<div data-dojo-type="agile.MultiItemEditor" data-dojo-attach-point="itemEditor">
		<table cellspacing="3px">
		<tr>
			<td title="{i18n_animation_name_tooltip}" class="tooltip">{i18n_animation_name}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='isKey:true,required:true,placeHolder:"name"'></div></td>
			<td title="{i18n_animation_duration_tooltip}" class="tooltip" >{i18n_duration}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='options:"+0",unit:"s",defValue:"0s",required:"true"'></div></td>
			<td nowrap="true" title="{i18n_animation_timing_function_tooltip}" class="tooltip" >{i18n_timing_function}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='defValue:"ease",required:true,options:"linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier"'></div></td>						
		</tr>		   	
		<tr>
		<td title="{i18n_animation_delay_tooltip}" class="tooltip" >{i18n_delay}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='options:"+0",unit:"s",defValue:"0s",required:true'></div></td>
			<td nowrap="true" title="{i18n_iteration_count_tooltip}" class="tooltip" >{i18n_iteration_count}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='decimal2Percentage:false,defValue:"infinite",required:true,options:"infinite,+0"'></div></td>
		    <td title="{i18n_animation_direction_tooltip}" class="tooltip" >{i18n_direction}</td><td><div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-props='options:"normal,alternate,reverse,alternate-reverse",defValue:"normal",required:true'></div></td>
	    </tr>
	    <tr>
		    <td title="{i18n_fill_mode_tooltip}" class="tooltip" >{i18n_fill_mode}</td><td><div data-dojo-type="agile.NumberComboBox" class="editor" data-dojo-props='defValue:"none",required:true,options:"none,forwards,backwards,both"'></div></td>
		    <td title="{i18n_play_state_tooltip}" class="tooltip" >{i18n_play_state}</td><td><div data-dojo-type="agile.AnimationPlayState" data-dojo-attach-point="playStateEditor"></div></td>
		    <td></td>
		</tr>	
		</table>
	</div>	
</div>	
[/#compress][/#assign]
templateString:"${templateString?js_string}",name:"animation",htmlName:"animation",keyframeValueEditor:null
,init:function(){
	this.itemEditor.listener=this;
	this.itemEditor.keyParser = {
		parse:function(text){
			var key = "";
			if(text){
				key = text.substring(0,text.indexOf(" "));
			}
			return key;
		}
	};
	//watch on value of animation name and notify keyframe editor of changes
	this.itemEditor.editors[0].watch("value",lang.hitch(this,function(name,old,value){
		this.keyframeValueEditor.set("animationName",value);
	}));
}
//,onItemSelected:function(items){
//	//summary: call-back when items are selected
//	//items: an array of item {value:key,innerHTML:value}
//	if(items.length == 0){
//		this.keyframeValueEditor.reset1("value","");
//	}
//}
//,onItemAdded:function(item){
//	//summary: call-back when an item is added
//	//item: the added item {value:key,innerHTML:value}
//	this.keyframeValueEditor.reset1("value","");
//}
//,onItemRemoved:function(items){
//	//summary: call-back when items are removed
//	//items: an array of item {value:key,innerHTML:value}
//	this.keyframeValueEditor.reset1("value","");
//}
,onValueChanged:function(value){
	//summary: call-back when the itemStore(MultiSelect) value is changed
	this.onChange(value,null,this.htmlName);
}
,reset1:function(name,value){
	if(name == "value"){			
		this.itemEditor.reset1("value",value[this.htmlName]);					
	}else if(name == "disabled" || name == "readOnly"){
		this.itemEditor.reset1(name,value);	
	}else{
		this.inherited(arguments);
	}
}	
,isValid:function(){	
	return this.itemEditor.isValid();
}
[/@]

[#--@define "agile.AnimationValueEditor","agile.MultiValueMetadataEditor"]
//	[#assign templateString]	
//	<form style="background-color:#87ceeb">
//		<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector" data-dojo-props='valueDelimeter:","'>
//			<table cellspacing="5px">	    	
//				<tr>
//					<td title="{i18n_animation_name_tooltip}" class="tooltip" >{i18n_animation_name}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationName",htmlName:"animation-name",fireOnChange:false,required:true,placeHolder:"name"'></div></td>
//					<td title="{i18n_animation_duration_tooltip}" class="tooltip" >{i18n_duration}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationDuration",htmlName:"animation-duration",fireOnChange:false,options:"+0",unit:"s",defValue:"0s",required:"true"'></div></td>
//					
//					<td title="{i18n_animation_delay_tooltip}" class="tooltip" >{i18n_delay}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationDelay",htmlName:"animation-delay",fireOnChange:false,options:"+0",unit:"s",defValue:"0s",required:true'></div></td>			
//				</tr>		   	
//				<tr>
//				    <td nowrap="true" title="{i18n_animation_timing_function_tooltip}" class="tooltip" >{i18n_timing_function}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationTimingFunction",htmlName:"animation-timing-function",fireOnChange:false,defValue:"ease",required:true,options:"linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier"'></div></td>
//					<td nowrap="true" title="{i18n_iteration_count_tooltip}" class="tooltip" >{i18n_iteration_count}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationInterationCount",htmlName:"animation-interation-count",fireOnChange:false,decimal2Percentage:false,defValue:"infinite",required:true,options:"infinite,+0"'></div></td>
//				    <td title="{i18n_animation_direction_tooltip}" class="tooltip" >{i18n_direction}</td><td><div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"animationDirection",htmlName:"animation-direction",fireOnChange:false,options:"normal,alternate,reverse,alternate-reverse",defValue:"normal",required:true'></div></td>
//			    </tr>
//			    <tr>
//				    <td title="{i18n_fill_mode_tooltip}" class="tooltip" >{i18n_fill_mode}</td><td><div data-dojo-type="agile.NumberComboBox" class="meditor" data-dojo-props='name:"animationFillMode",htmlName:"animation-fill-mode",fireOnChange:false,defValue:"none",required:true,options:"none,forwards,backwards,both"'></div></td>
//				    <td title="{i18n_play_state_tooltip}" class="tooltip" >{i18n_play_state}</td><td><div data-dojo-type="agile.AnimationPlayState" data-dojo-attach-point="playStateEditor"></div></td>
//				    <td></td>
//				</tr>		
//			</table>
//	 	</div>
//	 </form> 
//	[/#assign]
//	templateString:"${templateString?js_string}",name:"animation",htmlName:"animation"
//	,propertyNames:["animation-name","animation-duration","animation-timing-function","animation-delay","animation-interation-count","animation-direction","animation-fill-mode"]
//	,init:function(){
//		this.inherited(arguments);
//
//		this.meditors["animation-name"].watch("value",lang.hitch(this,function(name,oldValue,newValue){
//			this.propertyValueChanged("animation-name",oldValue,newValue);
//		}));
//		
//		this.playStateEditor.watch("value",lang.hitch(this,function(name,oldValue,newValue){
//			this.propertyValueChanged("animation-play-state",oldValue,newValue);
//		}));
//		
//		//notify animation editor to clear keyframe
//		aspect.after(this.selector,"removeOption",lang.hitch(this,function(){
//			this.propertyValueChanged("animation-keyframe",null,null);
//		}));
////	    aspect.after(this,"set",lang.hitch(this.playStateEditor,function(name,value){
////	    	if(name == "context"){
////	    		this.context = value;
////	    	}else if(name == "value"){
////	    		this.reset1(name,this.context.getCurrentWidget().metadata("style."+this.htmlName));
////	    	}
////	    });
////		aspect.after(this,"reset1",this.playStateEditor,function(name,value){
////	    	if(name == "context"){
////	    		this.context = value;
////	    	}else if(name == "value"){
////	    		this.reset1(name,this.context.getCurrentWidget().metadata("style."+this.htmlName));
////	    	}
////	    });	    
//	}
//	,set:function(name,value){
//		if(name == "context"){
//			this.playStateEditor[name] = value;
//		}
//		this.inherited(arguments);
//	}
//	,reset1:function(name,value){
//		if(name == "context"){
//			this.playStateEditor[name] = value;
//		}
//		this.inherited(arguments);
//	}
//	,getKey:function(){
//		//summary:animation name must be unique and can associate with only one animation rule and animation keyframe
//		 return this.meditors["animation-name"].get("value");
//	 }
//	,processBeforeAdd:function(){
//		return this.getKey();
//	}
//	,propertyValueChanged:function(name,oldValue,newValue){
//		//console.error(this.declaredClass,"propertyValueChanged=",arguments);
//	}
//
//   ,onOptionRemoved:function(options){	   
//	   this.inherited(arguments);
//	   //remove the animation key frames for animation removed
//	   array.forEach(options,function(option){
////		   console.log("animation##",option);
//		   var ownerWidget = this.context.getCurrentWidget();
//		   if(ownerWidget){
//			   var keyframes = ownerWidget.metadata("parameters.keyframes");							
//				var animationName = option.value.substring(0,option.value.indexOf(" "));						 
//				 if(keyframes[animationName]){
//					 delete keyframes[animationName];
//				 }
//		   }
//	   },this);
//   }	   
[/@--]

[@define "agile.AnimationEditor","agile._MetadataAware"]
[#assign templateString]
<table cellspacing="5px">		
	<tr><td><div data-dojo-type="agile.AnimationValueEditor" data-dojo-attach-point="animation" class="xeditor"></div></td></tr>
	<tr><td><div data-dojo-type="agile.AnimationFrameEditor" data-dojo-attach-point="keyframe" class="xeditor"></div></td></tr>
</table>
[/#assign]
templateString:"${templateString?js_string}",name:"animation",htmlName:"animation"
,init:function(){
	
	this.keyframe.animationValueEditor = this.animation;
	this.animation.keyframeValueEditor = this.keyframe;
[#--	
//	aspect.after(this.animation,"propertyValueChanged",lang.hitch(this,function(name,oldValue,newValue){		
//		//console.log(this.declaredClass,"##propertyValueChanged=",arguments);
//		if(name == "animation-name"){
////			console.log(this.declaredClass,"##animation-name=",arguments);
//			this.keyframe.set("animationName",newValue);
//		}else if(name == "animation-play-state"){
//			this.keyframe.set("animationPlayState",newValue);
//		}else if(name == "animation-keyframe"){
//			this.keyframe.set("value",newValue);
//		}
//	}),true);
	
//	aspect.after(this,"set",lang.hitch(this,function(name,value){console.log(this.declaredClass,"set=",arguments)}),true);
//	aspect.after(this,"reset1",lang.hitch(this,function(name,value){console.log(this.declaredClass,"reset=",arguments)}),true);
//	this.animation.watch("value",function(){
//		console.warn("#####Animation value changed:",arguments);
//	});
 --]
}

[/@]
		